<template>
  <div>
    <el-button type="primary" @click="teachplanActive={},teachplayFormVisible = true">添加课程计划</el-button>
    <el-tree
      :data="teachplanList"
      :props="defaultProps"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>

    <el-dialog title="上传并关联视频" :visible.sync="teachMediaFormVisible">
      <uploadView :teachplanName="teachplanName"
                  @getMediaData="getMediaDataFather"
      ></uploadView>
    </el-dialog>

    <el-dialog title="添加课程计划" :visible.sync="teachplayFormVisible">

      <el-form ref="teachplanForm" :model="teachplanActive" label-width="140px" style="width:600px;"
               :rules="teachplanRules">
        <el-form-item label="上级结点">
          <el-cascader
            :options="teachplanList"
            v-model="teachplanActive.parentid"
            :props="defaultProps"
            :show-all-levels="false"
          >
          </el-cascader>
          <!--          </el-select>-->
        </el-form-item>
        <el-form-item label="章节/课时名称" prop="pname">
          <el-input v-model="teachplanActive.pname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程类型">
          <el-radio-group v-model="teachplanActive.ptype">
            <el-radio class="radio" label='1'>视频</el-radio>
            <el-radio class="radio" label='2'>文档</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="学习时长（分钟）  请输入数字">
          <el-input type="number" v-model="teachplanActive.timelength" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序字段">
          <el-input v-model="teachplanActive.orderby" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="章节/课时介绍" prop="description">
          <el-input type="textarea" v-model="teachplanActive.description"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="teachplanActive.status">
            <el-radio class="radio" label="0">未发布</el-radio>
            <el-radio class="radio" label='1'>已发布</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="addTeachplan">提交</el-button>
          <el-button type="primary" v-on:click="resetForm">重置</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
    <el-dialog title="选择媒资文件" :visible.sync="mediaFormVisible">
      <media-list v-bind:ischoose="true" @choosemedia="choosemedia"></media-list>
    </el-dialog>

  </div>
</template>
<script>
    let id = 1000;
    import * as courseApi from '../../api/course';
    import utilApi from '../../../../common/utils';
    import * as systemApi from '../../../../base/api/system';
    import mediaList from '@/module/media/page/media_list.vue';
    import uploadView from '@/module/media/page/upload99.vue'

    export default {
        components: {
            mediaList,
            uploadView,
        },
        data() {
            return {
                defaultProps: {
                    checkStrictly: true,
                    value: 'id',
                    label: 'pname',
                    children: 'children'
                },
                mediaFormVisible: false,
                teachplayFormVisible: false,//控制添加窗口是否显示
                teachMediaFormVisible: false,//上传文件窗口是否显示
                teachplanList: [],
                teachplanRules: {
                    pname: [
                        {required: true, message: '请输入课程计划名称', trigger: 'blur'}
                    ],
                    status: [
                        {required: true, message: '请选择状态', trigger: 'blur'}
                    ]
                },
                teachplanActive: {},
                teachplanId: '',
                teachplanName: '',
            }
        },
        methods: {
            //选择视频，打开窗口
            choosevideo(data) {
                //得到当前的课程计划
                this.teachplanId = data.id
//        alert(this.teachplanId)
                this.mediaFormVisible = true;//打开窗口
            },
            //保存选择的视频
            choosemedia(mediaId, fileOriginalName, mediaUrl) {
                //保存视频到课程计划表中
                let teachplanMedia = {};
                teachplanMedia.mediaId = mediaId;
                teachplanMedia.mediaFileOriginalName = fileOriginalName;
                teachplanMedia.mediaUrl = mediaUrl;
                teachplanMedia.courseId = this.courseid;
                //课程计划
                teachplanMedia.teachplanId = this.teachplanId;

                courseApi.savemedia(teachplanMedia).then(res => {
                    if (res.success) {
                        this.$message.success("选择视频成功")
                        //关闭窗口
                        this.mediaFormVisible = false;
                        //查询课程计划
                        this.findTeachplan()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            //提交课程计划
            /**
             * 新增和修改调用同一个方法，暂时没得毛病
             */
            addTeachplan() {
                //校验表单
                this.$refs.teachplanForm.validate((valid) => {
                    if (valid) {
                      debugger;
                        //调用api方法
                        //将课程id设置到teachplanActive
                        this.teachplanActive.courseid = this.courseid;
                        this.teachplanActive.parentid = this.teachplanActive.parentid[this.teachplanActive.parentid.length - 1];
                        console.log(this.teachplanActive.parentid+"~~~~~~~~~~~~~~~~~~~~~~~");
                        console.log(this.teachplanActive);
                        courseApi.addTeachplan(this.teachplanActive).then(res => {
                            if (res.success) {
                                this.$message.success("操作成功");
                                //刷新树
                                this.findTeachplan();
                                this.teachplayFormVisible = false;
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //重置表单
            resetForm() {
                this.teachplanActive = {}
            },

            append(data) {
                console.log(1234567);
                const newChild = {id: id++, label: 'testtest', children: []};
                if (!data.children) {
                    this.$set(data, 'children', []);
                }
                data.children.push(newChild);

            },
            edit(data) {
                courseApi.fetchTeachplan(data.id).then(res => {
                    if (res) {
                        this.teachplanActive = res;
                    }
                });
                this.teachplayFormVisible = true;
            },
            remove(node, data) {
                // const parent = node.parent;
                // const children = parent.data.children || parent.data;
                // const index = children.findIndex(d => d.id === data.id);
                // children.splice(index, 1);
                courseApi.deleteTeachplan(data.id).then(res => {
                    if (res.success) {
                        this.findTeachplan();
                        this.$message.success("删除成功")
                    }
                })

            },
            play(data) {
                window.open("http://localhost/video-demo.html?name=" + data.teachplanMedia.mediaId);
            },
            /*这里是上传视频，并管理
              * 怎么实现呢。
              * 点击按钮弹出文件选择框
              * 选择完直接调用之前的方法上传，然后也不管他能不能上传成功，直接添加关联表。主要是因为调用activemq去处理视频后，没有办法获取到是成功还是失败。*/
            connectVideo(node, data) {
                this.teachplanId = data.id;//当前选择的计划id
                this.teachplanName = data.pname;
                this.teachMediaFormVisible = true;
            },
            getMediaDataFather(message) {
                //alert("子传父的id："+fileId);
                //然后调用关联的方法
                var m = message.split(",");
                this.choosemedia(m[0], m[1], m[2]);
                //关闭弹框
                this.teachMediaFormVisible = false;
                //刷新列表
                this.findTeachplan()
            },
            renderContent(h, {node, data, store}) {
                return (
                    <span
                        style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
            <span>
                <span>{node.label}</span>
            </span>
            <span>
              <el-button style="font-size: 12px;" type="text"
                         on-click={() => this.play(data)}>{data.teachplanMedia != null ? data.teachplanMedia.mediaFileOriginalName : ""}</el-button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <el-button style="font-size: 12px;" type="text"
                           on-click={() => this.choosevideo(data)}>选择视频</el-button>
              <el-button style="font-size: 12px;" type="text"
                         on-click={() => this.connectVideo(node, data)}>上传视频并关联</el-button>
              <el-button style="font-size: 12px;" type="text" on-click={() => this.edit(data)}>修改</el-button>
              <el-button style="font-size: 12px;" type="text" on-click={() => this.remove(node, data)}>删除</el-button>
            </span>
            </span>)
                    ;
            },
            findTeachplan() {
                this.teachplanList = [];
                //查询课程计划
                courseApi.findTeachplanList(this.courseid).then(res => {
                        this.teachplanList = res

                })
            }
        },
        mounted() {
            //课程id
            this.courseid = this.$route.params.courseid;
            //查询课程计划
            this.findTeachplan()
        }
    }
</script>
<style>

</style>
